<template>
    <div class="cate">
        <div class="nav">
            <ul>
                <li v-for="(item,index) in cateList" :key="index" :class="active==index?'li active':'li'" @click="changeActive(index)">
                  <div>
                      <img :src="'https://fuss10.elemecdn.com/'+item.image_url.substr(0,1)+'/'+item.image_url.substr(1,2)+'/'+item.image_url.substr(3)+'.jpeg'" alt="" v-if="index==4 || index==0"> 
                      <img :src="'https://fuss10.elemecdn.com/'+item.image_url.substr(0,1)+'/'+item.image_url.substr(1,2)+'/'+item.image_url.substr(3)+'.png'" alt="" v-if="item.image_url"> 
                      
                      <img src="//elm.cangdu.org/img/default.jpg" alt="" v-else>
                      <span>{{item.name}}</span>
                  </div>
                  <div>
                     <span class="count">{{item.count}}</span>
                     <van-icon name="arrow"  class="right"/>
                  </div>
                </li>
            </ul>
        </div>
        <div class="content"  ref="wrapper">
             <ul class="ul">
                <li v-for="(item,index) in list" :key="index" @click="searchCate(item.id,index,item.name)" :class="indexs==index?'active_tag':''">
                    <span>{{item.name}}</span>
                    <span>{{item.count}}</span>
                </li>
             </ul>
        </div>
    </div>
</template>
<script>
  
export default {
    props:["cateList"],
    data() {
        return {
            active:0,
            list:this.cateList[0].sub_categories,
            indexs:""
        }
    },
    methods:{
        changeActive(index){
            this.active = index;
            this.list = this.cateList[index].sub_categories;
        },
        searchCate(id,i,name){ 
            // 向父组件传值
            this.$emit("sendId",id,name)
            this.indexs = i;
        }
    },
    mounted(){
       
    },
    watch:{
        active(){
            this.indexs = ""
        }
    }
    
}
</script>
<style lang="less" scoped>
.cate{
    display: flex;
    .nav{
        width: 50%;
        height: 100%;
        background: #f1f1f1;
        .li{
            display: flex;
            justify-content: space-between;
            padding: 10px 5px;
            font-size: 14px;
            color: #666;
            img{
                width: 20px;
                vertical-align: middle;
            }
            .count{
                display: inline-block;
                padding:2px 3px;
                background: #b0b0b0;
                color: #fff;
                border-radius: 40px;
            }
            .right{
                margin-left: 5px;
                color: #b4b4b4;
            }
        }
    }
    .content{
        width: 50%;
        background: #FFF;
        padding: 10px;
        height: 370px;
        li{
            width: 100%;
            padding: 10px 0;
            border-bottom: 1px solid#e4e4e4;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
        }
    }
    .active{
     background: #fff;
    }
    .active_tag{
        color: #3190e8 !important;
    }
}
</style>